import React, { Component } from 'react'
import { Carousel, WingBlank } from 'antd-mobile';
import { Flex } from 'antd-mobile';
import { Grid } from 'antd-mobile';
import axios from 'axios'




import './index.scss'




 //8、导入utils中获取当前定位城市的方法


 import {  getCurrentCity } from '../../utils'



/* 4、导入导航菜单图片 */
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

// 3、导航菜单静态数据
const  navs = [
  {id:1,
  img:Nav1,
  title:'整租',
  path:'/home/list'
 },
 {id:2,
  img:Nav2,
  title:'合租',
  path:'/home/list'
 },
 {id:3,
  img:Nav3,
  title:'地图找房',
  path:'/map'
 },
 {id:4,
  img:Nav4,
  title:'去出租',
  path:'/rent'
 },
]



// 8、H5中的当前地理位置Api
// 当前地理位置通过navigator.geolocation对象提供，通过getCurrentPosition方法获取
/* navigator.geolocation.getCurrentPosition((position)=>{


  console.log('当前地理位置：',position)
   
  
  accuracy: 16861.455449301124   精度
  altitude: null  海拔高度
  altitudeAccuracy:null  海拔高度的精度
  heading: null  设备行进方向
  latitude: 1.352083  纬度
  longitude: 103.819836  经度
  speed: null  速度
  
  

})  */



  class Index  extends Component {

    state = {
      Swiper:[],
      isSwiperLoaded: false,
      groups:[],
      //最新资讯
      news:[],

      //初始化一个当前城市的状态
      curCityName:'上海'
    }
  
    //  1、定义获取轮播图数据的方法s
    async getSweipers (){

        const  res = await  axios.get('http://localhost:8080/home/swiper')
        this.setState(()=>{
          return  {
              Swiper:res.data.body,
               isSwiperLoaded:true ,

          }
        })


    }
         
  //  2、渲染轮播结构
     renderSwiper(){

        return  this.state.Swiper.map(it => (
          <a
            key={it.id}
            href="http://www.baidu.com"
            style={{ display: 'inline-block', width: '100%', height: 212 }}
          >
            <img
              src={`http://localhost:8080${it.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
             
            />
          </a>
        ))

     }


  // 5、渲染 nav导航栏组件
      renderNavs (){

          return  navs.map((it)=>(
                <Flex.Item   key={it.id}   onClick = { ()=>( this.props.history.push(it.path) )}>
                <img src={it.img }></img>
                  <h2>{it.title}</h2>
            </Flex.Item>
          ))



      }


    // 6、获取租房小组数据的方法

    async   getGroups(){

         const  res = await axios.get('http://localhost:8080/home/groups',{

          params:{
            area:'AREA%7C88cff55c-aaa4-e2e0'
          }
         })

         this.setState({
            groups:res.data.body
         })

    }

   //7、 获取最新资讯

   async  getNews(){

      const  res = await  axios.get(

        'http://localhost:8080/home/news',{
          params:{
            area:'AREA%7C88cff55c-aaa4-e2e0'
          }
        }
      )

        this.setState({
          news: res.data.body
        })


   }
   // 7-1、最新资讯jsx
     renderNews(){

           return  this.state.news.map((it)=>(
               <div   className='news-item'  key={ it.id}>
                      
                  <div  className='imgwrap'>
                        <img 
                        className='img'
                         src={`http://localhost:8080${ it.imgSrc}`}
                        
                        />
                  </div>
                     <Flex   className='content'  direction='column'  justify='between'>
                              <h3  className='title'>{it.title}</h3>
                              <Flex  className='info'  justify='between'>
                                    <span>{it.from}</span>
                                    <span>{it.date}</span>
                              </Flex>
                      
                      </Flex>     

               </div>
           ))




     }

   async componentDidMount() {
      this.getSweipers()
      this.getGroups()
      this.getNews()

      // 9、通过IP定位，获取到当前城市名称---调用工具---定位工具函数
           
        const      curCity = await getCurrentCity()
              console.log('当前定位城市是',curCity)
        this.setState({
          curCityName: curCity.label
        })
  }
  
  render() {
    return (
      <div  className='index'>
          <div  className='swiper'>

           {  this.state.isSwiperLoaded ? (
              <Carousel
              autoplay={true} infinite >
              { this.renderSwiper()}
            </Carousel>
         ):(
          ""
         )}

            {/* 搜索框 */}
                <Flex  className='search-box'>
                     <Flex  className='search'>
                            <div  className='location'  onClick={()=>{
                                 this.props.history.push('/citylist')
                            }} >
                              <span className='name'>{this.state.curCityName}</span>
                              <i className='iconfont  icon-arrow'></i>
                            </div>

                            <div   className='form'  onClick={()=>{
                              this.props.history.push('/search')
                            }}>
                               <i className='iconfont icon-seach'></i>
                               <span className='text'>请输入小区地址</span>
                            </div>
                     </Flex>
                      <i   className='iconfont  icon-map'  onClick={()=>{
                        this.props.history.push('/map')
                      }} />


                </Flex>

           </div>
 

    
         {/* 导航菜单 */}

           <Flex   className='nav'>
              {
                 this.renderNavs()
              }
           </Flex>



          {/* 
            租房小组
           */}

          <div  className='group'>
           <h3  className='group-title'  >租房小组
               <span  className='more'> 更多</span>
           </h3>
            

            <Grid data={this.state.groups}  square={false}   hasLine={false} columnNum={ 2} 
             renderItem={(item)=>{
                 return  (

                    <Flex  className='group-item'  justify='around' key={item.id}>
                          <div  className='desc'>
                            <p  className='title'>{item.title}</p>
                            <span className='info'>{item.desc}</span>
                          </div>

                         <img src={`http://localhost:8080${item.imgSrc}`}></img>
                    </Flex>
                 )
             }}
            
            
            />

          </div>
            

            {/* 最新资讯 */}

            <div className='news'>
                <h3   className='group-title'>最新资讯</h3>
                <WingBlank  size='md'>{this.renderNews()}</WingBlank>
            </div>
      </div>
    )
  }
}

export default Index 
